<template>
	<el-container style="height: 90vh">
		<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
			<el-menu 
					router
					:default-active="$route.path"
					:default-openeds="['1']"
					unique-opened>
				
					<el-menu-item index="/contests/list">
						<template slot="title"><i class="el-icon-trophy"></i>赛事管理</template>
					</el-menu-item>

					<el-menu-item index="/articles/list">
						<template slot="title"><i class="el-icon-document"></i>文章管理</template>
					</el-menu-item>
				
				<el-menu-item index="/achievement/list">
					<template slot="title"><i class="el-icon-star-off"></i>成果管理</template>
				</el-menu-item>

				<el-submenu index="5" v-if="this.$store.state.user.role=='super_admin'">
					<template slot="title"><i class="el-icon-setting"></i>系统设置</template>
					<el-menu-item index="/carousel/list">
						<template slot="title" index="/carousel/list">图片轮播设置</template>
					</el-menu-item>
					
					<!-- <el-menu-item-group  v-if="this.$store.state.user_role=='super_admin'">
					<el-menu-item index="/categories/create">
						<template slot="title">新建分类</template>
					</el-menu-item>
					<el-menu-item index="/categories/list">
						<template slot="title">编辑分类</template>
					</el-menu-item>
					</el-menu-item-group> -->
					
					<el-menu-item-group v-if="this.$store.state.user.role=='super_admin'">
					<el-menu-item index="/admin_users/list">
						<template slot="title">管理员列表</template>
					</el-menu-item>
					
					</el-menu-item-group>
					</el-submenu>
					<el-menu-item :index="this.url">
							<template slot="title"><i class="el-icon-user" />个人中心</template>
						</el-menu-item>
			</el-menu>
		</el-aside>

		<el-container>
			<el-header style="text-align: right; font-size: 12px">
				<el-button type="primary" size="small" @click="logOut()">退出</el-button>
				<el-divider direction="vertical"/>
				<span v-text="this.$store.state.user.name"/>
				<el-divider direction="vertical"/>
				<span v-text="this.$store.state.user.role"/>
			</el-header>
			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<style>
	.el-header {
		background-color: #B3C0D1;
		color: #333;
		line-height: 60px;
	}

	.el-aside {
		color: #333;
	}
	
	html,
	body {
		margin: 0;
		padding: 0;
	}
</style>

<script>
	const Cookies = require('js-cookie')
	export default {
		data () {
			return {
				url:''
			}
		},
		methods:{
			logOut(){
				sessionStorage.clear()
				Cookies.remove('user_token')
				this.$router.replace("/login");
			}
		},
		created() {
			this.url = "/admin_user/page/"+this.$store.state.user.id
			console.log(sessionStorage.getItem('user'))
		},
		mounted() {
			if(!Cookies.get('user_token'))
				this.$router.replace("/login")
		}
	}
</script>
